<template>
  <div class="header">
    <div class="baotuan">爆爆团</div>
    <div class="bao">限时爆款 超级低价</div>
    <div>
        <span>正在抢购</span>
        <span>上新预告</span>
    </div>
    <div class="list">
      <div class="shop" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
          <img :src="item.picture" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="desc" style="border-radius:20px;background-color:red;width:50px;margin-left:180px">马上抢</div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            myStatus:0,
            list:[]
        }
    },
    mounted(){
        axios.get('/api/tuan/list',{params:{status:this.myStatus}}).then((res)=>{
        this.list = res.data.list; 

        console.log(this.list);
    })
    }
}
</script>

<style scoped>
.header{
    background-color: red;
    width:  100%;
    height: 150px;
    float: left;
}
.header .baotuan{
    font-size: 20px;
    color: aliceblue;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
}
.header .bao{
    text-align: center;
    color: aliceblue;
    font-size: 30px;
    font-weight: bold;
    padding: 10px;
}
.header span{
    color: aliceblue;
    margin: 7px;
}
.list .shop{
  display: flex;
  margin: 10px;
}
.name{
  width: 260px;
}
.list{
    margin-top: 35px;
}
.list .shop .imgbox{
  width: 60px;
  margin-right: 10px;
}
.list .shop .imgbox img{
  width: 100%;
}
</style>
}
</script>

<style>

</style>